<template>
  <div >
      <el-button type="success" @click="openVideo">添加视频</el-button>
      <div class="tab_wrap">
       <el-table border :data="videoList">
         <el-table-column prop="Vname" label="视频名称"></el-table-column>
          <el-table-column prop="Vtime" label="视频时长"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                  <div>
                    <el-link type="danger" @click="deldirVideos(scope.row._id)">删除</el-link>
                  </div>
                </template>
            </el-table-column>
      </el-table>

      <el-dialog width="60%" v-model="videoFlag" title="选择视频">
            <video-component></video-component>
      </el-dialog>
      </div>
  </div>
</template>
<script lang="ts">
import videoComponent from '../Video/index.vue'
// composition API
import {ref,defineComponent,computed,onMounted,provide,reactive,toRefs} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {useStore} from 'vuex'
import {getDirVideo,delDirVideo} from '../../api/course'
import $bus from '../../utils/bus'
import { ElMessage } from 'element-plus';

export default { 
    components:{
      videoComponent
    },
    setup(){
          let videoFlag=ref(true);
          setTimeout(()=>{
            videoFlag.value=false; 
          },0)
          let route=useRoute();
          let dirrow:any=ref({})
          let videoList:any=ref([])
          $bus.on("senddir",(row:any)=>{
              // console.log("-----------",row)
              // 像视频组件 传递目录id
              dirrow.value=row;
              // 获取目录下的对应视频列表
              getDirVideo({
                     CDid: route.query.c_id, //课程_id
                    _id: row._id //目录_id
              }).then((res:any)=>{
                  console.log(res);
                  videoList.value=res.data.list;
              })
          })
          // 视频添加成功后传来的数据
          $bus.on("sendvideolist",(list)=>{
              videoList.value=list;
          })
          let openVideo=()=>{
              videoFlag.value=true;
          }
          // 删除目录下的视频
          let deldirVideos=async (id:any)=>{
            console.log({
                     CDid: route.query.c_id,//课程的_id 
                    _id:  dirrow.value._id,//目录id 
                    Vid: id//当前要删除的视频_id
               })
              var res=await delDirVideo({
                     CDid: route.query.c_id,//课程的_id 
                    _id: dirrow.value._id,//目录id 
                    Vid: id//当前要删除的视频_id
               })
               console.log(res)
               ElMessage.success("删除成功")
              //  从新获取目录下的视频
                 getDirVideo({
                     CDid: route.query.c_id, //课程_id
                    _id:dirrow.value._id //目录_id
                }).then((res:any)=>{
                    console.log(res);
                    videoList.value=res.data.list;
                })
          }
      return {
          videoFlag,
          dirrow,
          openVideo,
          videoList,
          deldirVideos
      }
    }
}
</script>
<style lang="less" scoped>
.tab_wrap{
  width: 500px;
  .el-table{
      width: 500px;
    }
}
    
</style>